<template>
  <div class="page" style="text-align:left;" 
  v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.7)"
    :data="tableData">
      <!-- 
  <div class="toolbar" >个人location:{{location}}</div>
       -->
       
    <div style="margin-bottom: 10px;text-align: left;font-weight: bold;font-size:17px;line-height: 1.3;display: block;">
      <span v-show="item.optional" style="color:red;font-size: 20px;float:left;">* </span>
      <span v-show="autoId">{{num+1}}.</span><span>{{item.title}}</span>
    </div>
    
       <div v-if="item.remark.trim()!=''" style="margin-bottom: 20px;text-align: left;font-size:14px;line-height: 1.3;color:grey;display: block;">
      说明：{{item.remark}}
    </div>
        
        <el-input placeholder="position" @change="provideanswer" v-model="input3" class="input-with-select" style="width: 100%;">
         <el-button slot="append" icon="el-icon-search" @click="open" >获取位置</el-button>
         <el-button type="text" @click="open" >点击打开 Message Box</el-button>
  </el-input>
  </div>
</template>

<script>
import { loadBMap } from "../../assets/js/loadBMap";
export default {
  data() {
    return {
      BMap: null,
      geolocation: null, // Geolocation对象实例
      positioning: false, // 定位中
      positioningInterval: null, // 定位倒计时计时器
      countDown: 30, // 倒计时，单位秒
      location: "", // 位置信息
      input3:"",
      fullscreenLoading: false,
      loading:false
    };
  },
  props:{
    item:Object,
    id:Number,
    editIcon:String,
    autoId:Boolean,
    num:Number
  },
  mounted() {
    const _this = this;
    window.initBaiduMapScript = () => {
      _this.BMap = window.BMap;
    };
    loadBMap("initBaiduMapScript");
    
  },
  methods: {
    provideanswer(){
      console.log('test1')
      let data={
        id:this.item.id,
        answer:this.input3,
      };
      this.$emit('sendanswer',data)

    },

    // 获取地理定位
    getLocation() {
        const _this = this;
        _this.geolocation = new _this.BMap.Geolocation();
        console.log(_this.geolocation)
        _this.geolocation.getCurrentPosition(function(r){ 
          //获取当前位置经纬度
          var myGeo = new self.BMap.Geocoder();
          myGeo.getLocation(new self.BMap.Point(r.point.lng, r.point.lat), function(result){ if (result){
          //根据当前位置经纬度解析成地址
          console.log(result.addressComponents)
          _this.input3=result.addressComponents.province+''+result.addressComponents.city+''+result.addressComponents.district+''+result.addressComponents.street


            let data={
              id:_this.item.id,
              answer:_this.input3,
            };
            _this.$emit('sendanswer',data);

            _this.loading=false
          console.log( _this.input3)
        //  self.ADDRESS_DETAIL(result.addressComponents.district+result.addressComponents.street); //在vuex中存入区、街道地址信息。其他地方需要使用直接调用

         // self.geohash = result.point.lat+","+result.point.lng;
        //  self.SAVE_GEOHASH(self.geohash); 

          //self.latitude = result.point.lat; self.longitude = result.point.lng;
          // console.log(result.point.lat); self.RECORD_ADDRESS({'latitude':result.point.lat,'longitude':result.point.lng});
          }
          });
          });
    },
    // 重置定位相关数据
    resetPositioning() {
      this.positioning = false;
      this.location = null;
      this.countDown = 30;
      clearInterval(this.positioningInterval);
    },
   /*  openFullScreen1() {
        this.fullscreenLoading = true;
        
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 1000);
      }, */
     open() {
        let _this=this
        this.$confirm('此操作将获取您的地理位置, 是否同意?', '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
  //    _this.openFullScreen1();
          _this.loading=true;
          _this.getLocation();
          console.log('11')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消获取'
          });          
        });
      }
  },
};
</script>
<style>
</style>